<template>
	<div>
		<Header>
			<h1>《JSON 必知必会》阅读摘要记录</h1>
				<div class="card_content">
					<div class="card_head">
						<div class="tag_cate">
							<a v-for="(val,key) in tag" v-bind:key="key">{{val}}</a>
						</div>
						<div class="post_info">
							<span>发布日期: {{instruction[0]}}&nbsp;</span>
							<span>更新日期: {{instruction[1]}}&nbsp;</span>
							<span>文章字数: {{instruction[2]}}&nbsp;</span>
							<span>阅读时长: {{instruction[3]}}分&nbsp;</span>
							<span>阅读次数: {{instruction[4]}}&nbsp;</span>
						</div>
					</div>
					<hr style="margin: 20px 0;">
					<div class="article_content">
						<button id="getData" v-on:click="getJson" style="width:200px;height:60px;">获取内容</button>
						<br>
						<mavon-editor
							:value="value"
							:subfield = "false"
							:defaultOpen = "'preview'"
							:toolbarsFlag = "false"
							:editable="false"
							:scrollStyle="true"
							:ishljs = "true">
						</mavon-editor>
						<!-- <mavon-editor v-model="value" v-on:change="change"></mavon-editor> -->
					</div>
				</div>
		</Header>
	</div>
</template>

<script>
import Header from '../components/Header.vue'

export default {
	name: 'Article',
	components: {
		Header,
	},
	data: function() {
		return {
			value: ``,
			tag: [],
			instruction: [],
		}
	},
	methods: {
		getJson: function() {
			fetch(this.url+"/article/articlerow",{
					method: "POST",
					headers: {"Content-Type": "application/x-www-form-urlencoded"},
					body: 'aid='+this.$route.params.aid
			})
			.then((res) => {return res.text()})
			.then((res) => {
				res = JSON.parse(res)["data"]
				this.tag = res["tags"].split(",")
				this.value = res["content"]
				this.instruction[0] = res["releasetime"]
				this.instruction[1] = res["updatetime"]
				this.instruction[2] = res["content"].length
				this.instruction[3] = "168"
				this.instruction[4] = res["clicknum"]
			})
		},
		change: function() {
		}
	},
	mounted() {
		var getButton = document.getElementById("getData")
		getButton.addEventListener("click",()=>{this.toast("好的~",2000)})
	}
}
</script>

<style scoped>
	.header {
		margin-top: -18rem;
		width: 100%;
		border: 0px;
		color: #3F3F3F;
		/* 背景高斯模糊 */
		backdrop-filter: blur(30px);
		box-shadow: 0px 0px 0px;
	}
	.card_content {
		width: 90%;
		margin: 0 auto;
		padding: 24px;
		background-color: white;
		/* background-color: #282c34; */
		border: 1px solid #DDDDDD;
		border-radius: 10px;
		box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
		text-align: left;
		color: #23263b;
		/* color: rgba(255, 255, 255, 0.85); */
	}
	.card_head {
		padding: 15px 20px 0 28px;
	}
	.tag_cate a {
		margin-right: 5px;
		padding: 0 12px;
		height: 25px;
		line-height: 25px;
		color: #fff;
		border-radius: 10px;
		background-image: linear-gradient(to left, #00c9ff 0%, #66a6ff 100%);
	}
	.post_info {
		margin: 10px auto;
	}
	.article_content {
		padding: 0px 10px 10px 10px;
	}
</style>



